<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>新建申请</title>
    <link href="../css/font.css" type="text/css" rel="stylesheet">
    <link href="../css/style.css" type="text/css" rel="stylesheet">
    <!--block[hdcss]-->

    <!--block[hdcss]end-->
</head>
<body>
<!--block[content]-->
<section class="wrap">
    <div class="page">
        <!--<header class="hd">头部 </header>-->
        <div class="m-search">
            <div class="iptWrap">
                <input class=" ipt" id="search-txt" type="text" placeholder="请输入姓名搜索"/>
                <i class="icon-search"></i>
            </div>
        </div>
        <div class="m-bar">
            <a class="u-btn" id="search" href="javascript:void(0)">搜索</a>

        </div>
        <div class="m-bar">
            <a class="u-btn" href="javascript:void(0)">按名称选人</a>
            <!-- <span class="checkAll"><i class="fa fa-circle-o"></i>全选</span> -->
        </div>
        <div class="listWrap" id="listPanelWrap">
            <ul class="m-opts"  id="listPanel">
           </ul> 
           <ul class="m-opts children" id="m-opts">
                
           </ul>
        </div>

    </div>
</section>

<div class="m-fixed-btns">
    <div>
        <a class="u-btn u-btn-cancel" href="javascript:void(0)">
            取&nbsp;&nbsp;消
        </a>
    </div>
    <div>
        <a class="u-btn" id="goto" href="javascript:void(0)">
            确&nbsp;&nbsp;定
        </a>
    </div>
</div>
<footer class="ft">底部</footer>
<!--block[content]end-->
<script type="text/tmpl" id="jTmpl_department_list">
    {{#data}}
    <li class="on" >
        <div class="cont cont_title" department_id="{{department_id}}">
        <span class="group">
            {{name}}
        </span>
            <span class="num">{{users_count}}人</span>
            <span class="fa fa-angle-down icon-status"></span>
            <span class="fa fa-angle-right icon-status"></span>
        </div>
        <ul class="m-opts children"  style="display:none">

        </ul>
    </li>
    {{/data}}
</script>

<script type="text/tmpl" id="jTmpl_user_list">
    {{#data}}
    <li>
        <div class="cont" user_id="{{user_id}}">
            <i  user_id="{{user_id}}" name="{{name}}" avatar="{{avatar}}" class="icon fa fa-circle-o"></i>
            <img src="{{avatar}}" class="thumb" alt="">
            <div class="person">{{name}}</div>
        </div>
    </li>
    {{/data}}
</script>
<script src="../js/lib/zepto.min.js" type="text/javascript"></script>
<script src="../js/lib/mustache.js" type="text/javascript"></script>
<script src="../js/plugin/juicer-min.js" type="text/javascript"></script>
<script type="text/javascript">

    Array.prototype.removeByValue = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
            this.splice(i, 1);
            break;
            }
        }
    };

    Array.prototype.unique = function(key) {
        var arr = this;
        var n = [arr[0]];
        for (var i = 1; i < arr.length; i++) {
            if (key === undefined) {
                if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
            } else {
                inner: {
                    var has = false;
                    for (var j = 0; j < n.length; j++) {
                        if (arr[i][key] == n[j][key]) {
                            has = true;
                            break inner;
                        }
                    }
                }
                if (!has) {
                    n.push(arr[i]);
                }
            }
        }
        return n;
    }

    var getDate = function(url,callback){
        var type =  type || 'get';
        $.ajax({
            url:url,// 跳转到 action
            type:'get',
            dataType:'jsonp',
            success:function(data) {
                callback && callback(data);
            }
        });
    };

    var list_arr = [];

    const baseUrl = 'http://www.7paxiu.com/';
    let url = baseUrl + 'user/department_list?callback=';
    
    let department_list_tpl = $('#jTmpl_department_list').html();

    getDate(url,function(data){
        console.log(data.data)
        if(data && data.code == 200){
            let element = Mustache.render(department_list_tpl, data.data);
            $('#m-opts').html(element);
        }
    });

    //page init
    ;(function(){

        var listPanelWrap = $('#listPanelWrap');
        listPanelWrap.height($(window).height()-120);


    })();


    //搜索
    $('#search').on('click',function(){
        let txt = $('#search-txt').val();
        if(txt == ''){
            alert('请输入搜索的内容');
            return false;
        }
        let tpl = $('#jTmpl_user_list').html();
        let url = baseUrl + 'user/search?q='+txt

        getDate(url,function(data){
            console.log(data)
            if(data && data.code == 200){
                console.log(data.data)
                if(!data.data.data.length){
                    alert('数据为空')
                }
                let element = Mustache.render(tpl, data.data);
                $('#listPanel').html(element);
            }
        }); 
    });

    //选择
    $('#listPanelWrap').on('click','i.icon',function(){
        let id = $(this).attr('user_id');
        let name = $(this).attr('name');;
        let avatar = $(this).attr('avatar');
        let data = {
            name:name,
            avatar:avatar,
            user_id:id
        }
        if($(this).hasClass('fa-check-circle-o')){
            $(this).removeClass('fa-check-circle-o');
            $(this).addClass('fa-circle-o');
            list_arr.removeByValue(data)

            for(let i = 0;i<list_arr.length;i++){
                if(id == list_arr[i].user_id){
                    list_arr.splice(i,1);
                }
            }
            

        }else{
            $(this).addClass('fa-check-circle-o');
            $(this).removeClass('fa-circle-o');
            list_arr.push(data)
        }
    })

    //展开二级目录
    $('#m-opts').on('click','.cont_title',function(){
        console.log(111)
        let _this = $(this);
        let id = $(this).attr('department_id');
        let url = baseUrl + 'user/list?callback=&department_id='+id;
        let tpl = $('#jTmpl_user_list').html();

        console.log($(this).data('show'))
        if($(this).data('show')){
            $(this).next().hide();
            $(this).data('show',false)
        }else{
            $(this).next().show();
            $(this).data('show',true)
        } 

        getDate(url,function(data){
            if(data && data.code == 200){
                let element = Mustache.render(tpl, data.data);
                _this.parent().find('ul.m-opts').html(element);
            }
        });

    })

    //保存信息
    $('#goto').on('click',function(){
        if(!$('.icon').hasClass('fa-check-circle-o')){
            alert('请选择要约见的人')
        }
        localStorage.clear();
        let jsonstr = JSON.stringify(list_arr);
        console.log(jsonstr)
        //JSON.parse(jsonstr);
        localStorage.setItem('user_id',jsonstr)
    })

</script>
<!--block[endscript]end-->
</body>
</html>